<template>
    <div>
        <Table :columns="columns14" :data="data5" border :span-method="handleSpan">
            <template slot-scope="{ row }" slot="btn">
                <div class="action-button">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="updateForm(row)">发送预警</Button>
                </div>
            </template>
        </Table>
        <template>
            <Modal
                    v-model="modal1"
                    title="发送预警"
                    @on-ok="ok"
                    @on-cancel="cancel">
                <Checkbox-group class="ivu-row">
                    <Checkbox value="twitter" class="ivu-col ivu-col-span-24">
                        <Icon type="social-twitter"></Icon>
                        <span style="margin-right: 10px">姓名：张** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：138****6688</span>
                    </Checkbox>
                    <Checkbox value="facebook" class="ivu-col ivu-col-span-24">
                        <Icon type="social-facebook"></Icon>
                        <span style="margin-right: 10px">姓名：王** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：130****7788</span>
                    </Checkbox>
                    <Checkbox value="github" class="ivu-col ivu-col-span-24">
                        <Icon type="social-github"></Icon>
                        <span style="margin-right: 10px">姓名：李** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：138****6578</span>
                    </Checkbox>
                    <Checkbox value="snapchat" class="ivu-col ivu-col-span-24">
                        <Icon type="social-snapchat"></Icon>
                        <span style="margin-right: 10px">姓名：赫** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：138****5212</span>
                    </Checkbox>
                </Checkbox-group>
            </Modal>
        </template>
    </div>
</template>
<script>
export default {
  data () {
    return {
      columns14: [
        {
          title: '区县',
          key: 'id',
          align: 'center',
          width: 100
        },
        {
          title: '项目',
          key: 'imp_date',
          align: 'center',
          width: 200
        },
        {
          title: '时间',
          key: 'age',
          align: 'center',
          children: [
            {
              title: '03-19',
              key: 'jlsth',
              align: 'center',
              width: 100
            },
            {
              title: '03-20',
              key: 'jlsth',
              align: 'center',
              width: 100
            },
            {
              title: '03-21',
              key: 'jlsth',
              align: 'center',
              width: 100
            },
            {
              title: '03-22',
              key: 'jlsth',
              align: 'center',
              width: 100
            },
            {
              title: '03-23',
              key: 'jlsth',
              align: 'center',
              width: 100
            },
            {
              title: '03-24',
              key: 'jlsth',
              align: 'center',
              width: 100
            },
            {
              title: '03-25',
              key: 'jlsth',
              align: 'center',
              width: 100
            },
            {
              title: '03-26',
              key: 'jlsth',
              align: 'center',
              width: 100
            },
            {
              title: '03-27',
              key: 'jlsth',
              align: 'center',
              width: 100
            },
            {
              title: '03-28',
              key: 'jlsth',
              align: 'center',
              width: 100
            }
          ]
        },
        {
          title: '预警',
          slot: 'btn',
          align: 'center',
          width: 100
        }
      ],
      data5: [
        {
          id: '和平区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '和平区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '和平区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '和平区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '和平区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '和平区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '沈河区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '沈河区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '沈河区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '沈河区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '沈河区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '沈河区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '铁西区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '铁西区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '铁西区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '铁西区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '铁西区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '铁西区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '皇姑区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '皇姑区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '皇姑区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '皇姑区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '皇姑区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '皇姑区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '大东区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '大东区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '大东区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '大东区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '大东区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '大东区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '浑南区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '浑南区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '浑南区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '浑南区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '浑南区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '浑南区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '于洪区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '于洪区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '于洪区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '于洪区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '于洪区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '于洪区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '沈北新区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '沈北新区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '沈北新区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '沈北新区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '沈北新区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '沈北新区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '苏家屯区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '苏家屯区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '苏家屯区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '苏家屯区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '苏家屯区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '苏家屯区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '辽中区',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '辽中区',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '辽中区',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '辽中区',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '辽中区',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '辽中区',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '新民市',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '新民市',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '新民市',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '新民市',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '新民市',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '新民市',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '法库县',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '法库县',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '法库县',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '法库县',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '法库县',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '法库县',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        },
        {
          id: '康平县',
          imp_date: '入沈人员管理',
          jlsth: '✔'
        },
        {
          id: '康平县',
          imp_date: '中转人员管理',
          jlsth: '✔'
        },
        {
          id: '康平县',
          imp_date: '密接人员管理',
          jlsth: '✔'
        },
        {
          id: '康平县',
          imp_date: '接触人员管理',
          jlsth: '✔'
        },
        {
          id: '康平县',
          imp_date: '隔离人员管理',
          jlsth: '✔'
        },
        {
          id: '康平县',
          imp_date: '核酸检测管理',
          jlsth: '✔'
        }
      ],
      modal1: false,
      social: ['facebook', 'github']
    }
  },
  methods: {
    ok () {
      this.$Message.info('成功发送预警！')
    },
    cancel () {
      // this.$Message.info('成功发送预警！')
    },
    updateForm () {
      console.log('1111')
      this.modal1 = true
    },
    handleSpan ({ row, column, rowIndex, columnIndex }) {

    }
  }
}
</script>
<style>
    .ivu-col.ivu-col-span-24.ivu-checkbox-wrapper{
        margin-bottom: 10px;
    }
</style>
